<template>
  <div class="docker">
    <div
      :class="['docker__item', index === 0 ?  'docker__item--active':'']"
      v-for="(item, index) in dockerList" :key="index">
      <router-link :to="item.to">
        <div class="iconfont" v-html="item.icon"/>
        <div class="docker_title">{{item.text}}</div>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Docker',
  setup () {
    const dockerList = [
      {
        icon: '&#xe62e;',
        text: '首页',
        to: { name: 'Home' }
      },
      {
        icon: '&#xe899;',
        text: '购物车',
        to: { name: 'Cart' }
      },
      {
        icon: '&#xe601;',
        text: '订单',
        to: { name: 'Cart' }
      },
      {
        icon: '&#xe78b;',
        text: '我的',
        to: { name: 'Cart' }
      }
    ]
    return {
      dockerList
    }
  }
}
</script>
<style lang="scss" scoped>
.docker {
  @import "../../style/viriable.scss";
  color: $content-fontcolor;
  display: flex;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: .01rem solid $content-bgColor;
  background-color: #ccc;
  font-size: .14rem;
  transform: scale(0.5 0.5);
  transform-origin: center, top;
  &__item {
    flex: 1;
    text-align: center;
    margin: auto;
    .iconfont {
      font-size: 0.2rem;
    }
  }
  &__item--active {
    color: #1fa4fc;
  }
}
</style>
